<template>
	<view>
		<page-meta :page-style="pageStyle" />

		<!-- 自定义导航 -->
		<musichead :title="'排行榜'" :back="true" :filter="false" :bg="true" />

		<view class="explorePlaylist" ref="explorePlaylist">
			<view class="explorePlaylist-main">
				<!-- 分类列表 -->
				<view class="explorePlaylist-main__cate">
					<!-- 滚动列表 -->
					<scroll-view :scroll-x="true">
						<view
							class="explorePlaylist-main__cate-item"
							v-for="(item, idx) in toplistCate.data"
							:key="`cate-item-${idx}`"
							:class="{ 'cate-item-text-checked': item.title === toplistCate.curTitle }"
							@click="switchCate({ title: item.title, idx: idx })"
						>
							<view class="explorePlaylist-main__cate-item-spacing">
								<text class="explorePlaylist-main__cate-item-text">{{ item.title }}</text>
							</view>
						</view>
					</scroll-view>
				</view>

				<view
					v-for="(cateItem, cateIdx) in toplistCate.data"
					:key="`cate-py-${cateIdx}`"
					:data-title="cateItem.title"
					:class="`top-playlist-observer top-playlist-observer-${cateIdx}`"
				>
					<SectionFrame :title="cateItem.title + '榜'" :more="false">
						<template #default>
							<view class="explorePlaylist-main__list">
								<view class="explorePlaylist-main__list-item" v-for="(item, idx) in cateItem.list" :key="`list-item-${idx}`">
									<SectionFramePlaylistItem :data="item" />
								</view>
							</view>
						</template>
					</SectionFrame>
				</view>

				<!-- 加载 observe -->
				<view class="explorePlaylist-main__list-loading">
					{{ data.more || data.loading ? ' 加载更多...' : '没有更多了' }}
				</view>

				<!-- end -->
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			data: {
				list: [],

				// 当前页数
				curPage: 0,

				// 总数
				total: undefined,

				// 是否还有更多
				more: false,

				// 加载状态
				loading: false,

				// 精品歌单获取更多的参数
				before: undefined,

				// 是否正在切换分类（切换有300ms动画）
				seek: false
			},

			// 榜单分类列表
			toplistCate: {
				curTitle: '官方',
				keywords: [
					['飙升榜', '新歌榜', '热歌榜', '原创榜', '畅销榜', '最火视频榜'],
					[
						'Beatport全球电子舞曲榜',
						'云音乐ACG VOCALOID榜',
						'中国新乡村音乐排行榜',
						'云音乐ACG游戏榜',
						'云音乐ACG动画榜',
						'黑胶VIP爱听榜',
						'听歌识曲榜',
						'网络热歌榜',
						'BEAT排行榜',
						'潜力爆款榜',
						'KTV唛榜'
					],
					['云音乐说唱榜', '云音乐电音榜', '云音乐ACG榜', '云音乐摇滚榜', '云音乐国电榜', '云音乐民谣榜', '云音乐古典榜', '云音乐古风榜', '中文DJ榜'],
					[
						'美国Billboard榜',
						'UK排行榜周榜',
						'日本Oricon榜',
						'法国 NRJ Vos Hits 周榜',
						'俄罗斯top hit流行音乐榜',
						'云音乐欧美新歌榜',
						'云音乐欧美热歌榜',
						'云音乐日语榜',
						'云音乐韩语榜',
						'越南语榜',
						'泰语榜',
						'俄语榜'
					]
				],
				initScroll: 0,
				data: [
					{
						scrollTop: undefined,
						title: '官方',
						list: []
					},
					{
						scrollTop: undefined,
						title: '精选',
						list: []
					},
					{
						scrollTop: undefined,
						title: '曲风',
						list: []
					},
					{
						scrollTop: undefined,
						title: '全球',
						list: []
					}
				]
			}
		};
	},
	computed: {
		pageStyle() {
			return this.$store.getters['theme/getPageMetaStyle'];
		}
	},

	onReady() {
		this.$store.dispatch('theme/setTheme', 'raw');
		uni.showLoading({ title: '加载中' });

		this.$store.dispatch('getToplistDetail').then((res) => {
			const keywordsValues = this.toplistCate.keywords;
			// 给排行榜手动分类，分类列表（toplistCate）
			res.forEach((v) => {
				const findIdx = keywordsValues.findIndex((keywords) => keywords.includes(v.title));
				if (findIdx > -1) {
					this.toplistCate.data[findIdx].list.push(v);
				}
			});
			uni.hideLoading();
			this.$nextTick(() => {
				this.toplistCate.data.forEach((v, idx) => {
					uni.createSelectorQuery()
						.in(this.$refs.explorePlaylist)
						.select(`.top-playlist-observer-${idx}`)
						.boundingClientRect((res) => {
							if (idx === 0) {
								//前往第一个
								//获取当前元素与顶部距离
								this.toplistCate.initScroll = res.top;
								this.toplistCate.data[idx].scrollTop = 0;
								this.observeSection(res.top);
							} else {
								this.toplistCate.data[idx].scrollTop = res.top - this.toplistCate.initScroll;
							}
						})
						.exec();
				});
			});
		});
	},

	methods: {
		//依次绑定滚动到指定位置
		observeSection(scrollTop) {
			uni.createIntersectionObserver(this.$refs.explorePlaylist, {
				observeAll: true,
				// 微信小程序似乎不支持 thresholds: 1
				thresholds: [0.98],
				initialRatio: 0
			})
				.relativeToViewport({ top: scrollTop })
				.observe(`.top-playlist-observer`, (res) => {
					console.log('交叉节点', res);
					if (res.intersectionRatio >= 0.98 && !this.data.seek) {
						this.toplistCate.curTitle = res.dataset.title;
					}
				});
		},
		// 切换分类
		switchCate(item) {
			this.toplistCate.curTitle = item.title;
			this.data.seek = true;

			uni.pageScrollTo({
				scrollTop: this.toplistCate.data[item.idx].scrollTop,
				duration: 200
			});
			setTimeout(() => (this.data.seek = false), 300);
		}
	}
};
</script>

<style lang="scss" scoped>
.explorePlaylist {
	// 单项的宽度、封面宽高
	--item-size: calc((100vw - 100rpx) / 3);

	// 单项之间的间距
	--item-spacing: 9.6rpx;

	// 页间距
	--page-spacing: 30rpx;

	width: 100%;
	background: var(--theme-background-color);

	.explorePlaylist-main {
		width: 100%;
		padding-top: calc(var(--my-status-bar-height) + var(--nav-tab-height-custom) + 64rpx);
		padding-bottom: calc(87.2rpx + 54px);
		// box-sizing: border-box;

		// 分类列表
		.explorePlaylist-main__cate {
			overflow: hidden;
			z-index: 3;
			width: 100%;
			height: 64rpx;
			line-height: 64rpx;
			position: fixed;
			white-space: nowrap;
			box-sizing: border-box;
			padding-right: 100rpx;
			margin-bottom: 10rpx;
			background-color: var(--theme-background-color-card);
			top: calc(var(--my-status-bar-height) + var(--nav-tab-height-custom) - 3px);

			.explorePlaylist-main__cate-item {
				display: inline-block;
				height: 100%;
				padding: 0 25rpx 0 30rpx;

				.explorePlaylist-main__cate-item-spacing {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28.2rpx;
					font-weight: 400;
					color: var(--theme-text-sub-color);

					.explorePlaylist-main__cate-item-text {
						position: relative;
						z-index: 1;
					}
				}
			}

			// 选中状态
			.cate-item-text-checked > .explorePlaylist-main__cate-item-spacing {
				font-weight: 600;
				color: var(--theme-text-title-color);
				position: relative;
				&::before {
					content: '';
					position: absolute;
					left: 0;
					bottom: 14.1rpx;
					width: 100%;
					height: 12.8rpx;
					background: linear-gradient(to right, rgb(233, 120, 110), rgb(232, 82, 90));
					border-radius: 12.8rpx;
					z-index: 0;
				}
			}
		}

		// 列表
		.explorePlaylist-main__list {
			padding: 0 20.4rpx;
			.explorePlaylist-main__list-item {
				display: inline-block;
				margin-top: 26rpx;
			}
		}

		// 加载框
		.explorePlaylist-main__list-loading {
			margin-top: 32rpx;
			width: 100%;
			height: 64rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: var(--theme-text-sub-color);
		}
	}
}
</style>
